<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
    </script>
</head>

<body>
    <!-- <script>
        var app = angular.module('myApp', []);
        创建控制器
        app.controller('myCtrl', function ($scope) {
            $scope.firstName = "John";
            $scope.lastName = "Doe";
            $scope.fullName = function () {
                return $scope.firstName + " " + $scope.lastName;
            }
        });
    </script> -->
    <!-- <div ng-app="myApp" ng-controller="myCtrl">
        姓：<input type="text" ng-model="firstName"><br> 
        名：<input type="text" ng-model="lastName"><br> 
        姓名：{{fullName() | uppercase}}
    </div> -->


    <!-- <script>
        var app = angular.module('myApp', []);
        app.controller('costCtrl', function($scope) {
            $scope.quantity = 1;
            $scope.price = 9.99;
        });
    </script>
    <div ng-app="myApp" ng-controller="costCtrl">
        数量: <input type="number" ng-model="quantity"><br>
        价格: <input type="number" ng-model="price">
        <p>总价 = {{ (quantity * price) | currency }}</p>
    </div> -->


    <!-- <div ng-app="myApp" ng-controller="namesCtrl">
        <ul>
            <li ng-repeat="x in names | orderBy:'country'">
                {{ x.name + ', ' + x.country }}
            </li>
        </ul>
    </div> -->


    <div ng-app="myApp" ng-controller="namesCtrl">
        <input type="text" ng-model="test">
        <ul>
            <li ng-repeat="x in names | filter:test | orderBy:'country'">
                {{ (x.name | uppercase) + ', ' + x.country }}
            </li>
        </ul>
    </div>

    <!-- 自定义过滤器 -->
    <script>
        app.filter('reverse', function () { //可以注入依赖
            return function (text) {
                return text.split("").reverse().join("");
            }
        });
    </script>
</body>

</html>